<template>
  <div class="container">
    <div class="warehouse_form">
      <div>
        <a-form layout="inline" :form="form">
          <a-form-item>
            <a-select placeholder="任务类型" v-model="form.taskType" style="width: 150px">
              <a-select-option v-for="(t, i) in taskTypeList" :key="i" :value="t.value">
                {{ t.label }}
              </a-select-option></a-select
            >
          </a-form-item>
          <a-form-item>
            <a-input placeholder="标记起点" v-model="form.startNodeStr">
              <a-switch
                slot="suffix"
                v-model="form.startSwitch"
                checked-children="开"
                un-checked-children="关"
                @change="onChange($event, 'startSwitch')"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input placeholder="标记终点" v-model="form.endNodeStr">
              <a-switch
                slot="suffix"
                v-model="form.endSwitch"
                checked-children="开"
                un-checked-children="关"
                @change="onChange($event, 'endSwitch')"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-select placeholder="请选择分配车辆" v-model="form.rgvId" style="width: 150px">
              <a-select-option v-for="(t, i) in rgvsList" :key="i" :value="t.value">
                {{ t.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-model="form.systemAssignedMode">系统分配 </a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="generateTaskHandle">分配任务 </a-button>
          </a-form-item>
        </a-form>
      </div>
      <!-- <div style="color: deepskyblue">使用率25.6%353/1379</div> -->
    </div>
    <div class="warehouse_content">
      <div class="warehouse_table">
        <a-tabs>
          <a-tab-pane key="1"
            ><span slot="tab">
              <a-icon type="tool" />
              设备信息
            </span>
            <a-table
              :customRow="rowClick"
              rowKey="id"
              size="small"
              :loading="loading"
              :columns="deviceColumns"
              :data-source="deviceData"
            >
              <span slot="coord" slot-scope="text, record">
                {{ record.coord.x + ',' + record.coord.y + ',' + record.coord.z }}
              </span>
              <span slot="taskStatus" slot-scope="text, record">
                <a-tag size="small" color="blue" v-if="record.taskStatus == '已开始'"> {{ record.taskStatus }}</a-tag>
                <a-tag size="small" color="green" v-else-if="record.taskStatus == '已结束'">
                  {{ record.taskStatus }}</a-tag
                >
                <a-tag size="small" v-else> {{ record.taskStatus }}</a-tag>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">
              <a-icon type="apartment" />
              提升机信息
            </span>
            <a-table size="small" :loading="loading" :columns="elevatorColumns" :data-source="elevatorData">
              <span slot="readyState" slot-scope="text, record">
                <a-tag size="small" color="blue" v-if="record.taskStatus == '就绪'"> {{ record.readyState }}</a-tag>
                <a-tag size="small" color="green" v-else-if="record.taskStatus == '结束'">
                  {{ record.readyState }}</a-tag
                >
                <a-tag size="small" v-else> {{ record.readyState }}</a-tag>
              </span></a-table
            >
          </a-tab-pane>
        </a-tabs>
      </div>

      <div class="warehouse_grid">
        <div class="warehouse_grid_hearder">
          <div class="grid_info_item">
            坐标:
            <div>({{ gridInfo.x + ',' + gridInfo.y + ',' + gridInfo.z || '' }})</div>
          </div>
          <div class="grid_info_item">
            类型:
            <div>{{ gridInfo.nodeType }}</div>
          </div>
          <div class="grid_info_item">
            x轴位移量(mm):
            <div>{{ gridInfo.offsetX }}</div>
          </div>
          <div class="grid_info_item">
            y轴位移量(mm):
            <div>{{ gridInfo.offsetY }}</div>
          </div>
          <div class="grid_info_item">
            编号:
            <div>{{ gridInfo.no }}</div>
          </div>
          <div class="grid_info_item">
            地码:
            <div>{{ gridInfo.groundCode }}</div>
          </div>
          <div class="grid_info_item">
            可驶出方向:
            <div>
              <a-icon type="arrow-up" v-if="gridInfo.beUp" />
              <a-icon type="arrow-right" v-if="gridInfo.beRight" />
              <a-icon type="arrow-down" v-if="gridInfo.beDown" />
              <a-icon type="arrow-left" v-if="gridInfo.beLeft" />
            </div>
          </div>
        </div>

        <dragZoomBox
          ref="dragZoomBox"
          :height="gridTable && gridTable.length > 0 ? gridTable.length * 30 * scale : '100%'"
        >
          <template v-if="gridTable && gridTable.length > 0">
            <div
              class="warehouse_grid_map"
              :style="{ postion: 'relative', transform: `scale(${scale})`, transformOrigin: 'top left' }"
            >
              <div v-for="(gx, i) in gridTable" :key="i" class="warehouse_grid_map_line">
                <div
                  v-for="(gy, ti) in gx"
                  :key="ti"
                  class="warehouse_grid_map_line_item"
                  @click="
                    () => {
                      clickCarFlag = ''
                      setGrid(i, ti)
                    }
                  "
                >
                  <div
                    :style="{
                      background: getColor(gy ? gy.nodeTypeEnum : ''),
                      height: '100%',
                      width: '100%',
                    }"
                  >
                    <div :style="{ background: '#dbebea' }" class="xy_content" v-if="ti == 0 && i == 0">
                      <span style="position: absolute; top: -7px; left: -9px">X</span>
                      <span style="position: absolute; top: -17px">Y</span>
                    </div>
                    <div :style="{ background: '#dbebea' }" v-else-if="ti == 0 && i > 0">{{ i }}</div>
                    <div :style="{ background: '#dbebea' }" v-else-if="ti > 0 && i == 0">{{ ti }}</div>
                    <img
                      v-else-if="gy && gy.nodeTypeEnum == 2 && gy.nodeStatus == 'Y'"
                      :src="require(`./imgs/${gy.nodeTypeEnum}.png`)"
                    />

                    <img
                      v-else-if="gy && gy.nodeTypeEnum != 0 && gy.nodeTypeEnum != 3 && gy.nodeTypeEnum != 2"
                      :src="require(`./imgs/${gy.nodeTypeEnum}.png`)"
                    />
                    <!-- <img draggable="false" v-if="gy && gy.nodeTypeEnum" :src="require(`./imgs/${gy.nodeTypeEnum}.png`)" /> -->
                  </div>
                </div>
              </div>
              <div
                v-for="(data, i) in mapData"
                :style="`position: absolute;top:${data.top}px;left: ${data.left}px;`"
                :key="'map' + i"
                class="map_data"
              >
                <template v-if="data.type == 0">
                  <img
                    :src="data.rgvStatus == '正常' ? require('./imgs/arrow.png') : require('./imgs/arrowr.png')"
                    :style="`width: 6px; height: 6px;transform:rotate(${
                data.direction == 'x+'
                        ? '90deg'
                        : data.direction == 'y+'
                        ? '0deg'
                        : data.direction == 'x-'
                        ? '270deg'
                        : '180deg'
                    });`"
                    @click="clickCar(data)"
                  />
                  <img
                    :src="data.rgvStatus == '正常' ? require('./imgs/car.png') : require('./imgs/carr.png')"
                    style="width: 13px; height: 13px"
                    @click="clickCar(data)"
                  />
                  <img
                    v-if="data.palletStatus == '顶升'"
                    :src="data.rgvStatus == '正常' ? require('./imgs/t.png') : require('./imgs/tr.png')"
                    style="width: 8px; height: 8px"
                    @click="clickCar(data)"
                  />
                  <img
                    v-if="data.palletStatus == '下降'"
                    :src="data.rgvStatus == '正常' ? require('./imgs/b.png') : require('./imgs/br.png')"
                    style="width: 8px; height: 8px"
                    @click="clickCar(data)"
                  />
                </template>
                <template v-if="data.type == 1">
                  <img
                    :src="require('./imgs/empty.png')"
                    v-if="data.palletExist == '不存在' && data.runIng == '不运行'"
                    style="width: 55px; transform: translateY(-17px); pointer-events: none"
                  />

                  <div
                    class="runingLine"
                    v-if="data.palletExist == '存在' && data.runIng == '运行'"
                    style="width: 50px; height: 100%; pointer-events: none"
                  />
                  <img
                    :src="require('./imgs/runing.png')"
                    v-if="data.palletExist == '存在' && data.runIng == '不运行'"
                    style="width: 55px; transform: translateY(-17px); pointer-events: none"
                  />
                  <img
                    :src="require('./imgs/runing_empty.png')"
                    v-if="data.palletExist == '不存在' && data.runIng == '运行'"
                    style="width: 55px; transform: translateY(-17px); pointer-events: none"
                  />
                </template>
              </div>

              <div
                v-for="(data, i) in lockedCoordinate"
                :style="`position: absolute;top:${data.top}px;left: ${data.left}px;pointer-events:none;`"
                :key="'lock' + i"
              >
                <img src="./imgs/lock.png" style="width: 30px; height: 30px; padding: 2px; margin-top: 1px" />
              </div>

              <div
                class="focus_grid"
                :style="`position: absolute;width: 30px;height: 30px; top:${gridInfo.x * 30}px;left: ${
                  gridInfo.y * 30
                }px;`"
              ></div>
            </div>
          </template>
        </dragZoomBox>
        <div class="warehouse_grid_contorl">
          <a-button type="primary" size="small" :disabled="floor == 1" @click="prev">上一层</a-button>
          <a-button type="primary" size="small" :disabled="maxFloor == floor" @click="next">下一层</a-button>
          <div style="display: flex">
            <a-input-number size="small" v-model="jumpFloor" :max="maxFloor" :precision="0"></a-input-number>
            <div>&nbsp;/{{ maxFloor }}</div>
          </div>

          <a-button type="primary" size="small" @click="jump">跳转</a-button>
          <div>当前层数：{{ floor }}</div>
        </div>
      </div>
    </div>

    <div class="warehouse_info" :style="`right  :${infoShow ? '0px' : '-372px'}`">
      <div class="tabs">
        <div
          style="background: #888888; color: white"
          v-if="infoShow"
          @click="
            () => {
              infoShow = false
            }
          "
        >
          <a-icon type="close" />
        </div>
        <div
          style="background: #888888; color: white"
          v-else
          @click="
            () => {
              infoShow = true
            }
          "
        >
          <a-icon type="rollback" />
        </div>
        <div
          @click="
            () => {
              nodeIndex = t
            }
          "
          v-for="(t, i) in Object.keys(nodeData)"
          :style="`color:${nodeIndex == t ? 'white' : ''}`"
          :key="i"
        >
          {{ t == 'coordinationDetailedInfo' ? '地图' : t == 'rgvInfo' ? '小车' : t }}
        </div>
      </div>
      <div class="form">
        <a-form :form="form" :label-col="{ span: 8 }">
          <template v-if="nodeIndex == 'coordinationDetailedInfo'">
            <a-form-item label="位置"> ({{ gridInfo.x + ',' + gridInfo.y + ',' + gridInfo.z }}) </a-form-item>
            <a-form-item label="节点类型">
              {{ gridInfo.nodeTypej }}
            </a-form-item>
            <a-form-item label="托盘码">
              {{ gridInfo.palletCode }}
            </a-form-item>
            <a-form-item label="地码">
              {{ gridInfo.groundCode }}
            </a-form-item>
            <a-form-item label="货物状态">
              <a-switch
               v-model="isNodeStatusChecked"
               checked-children="有货"
               un-checked-children="无货"
               :default-checked="true"
               @change="updateNodeStatus(gridInfo.id,isNodeStatusChecked)"
             />
            </a-form-item>
          </template>
          <template v-else-if="nodeIndex == 'rgvInfo'">
            <a-form-item
              v-for="(key, index) in Object.keys(nodeData[nodeIndex])"
              :key="index"
              :label="rgvInfoFiled[key]"
            >
              {{ nodeData[nodeIndex][key] }}
            </a-form-item>

            <a-from-item>
              <div style="display: flex; justify-content: space-around">
                <a-button @click="stopRgvHandle(nodeData[nodeIndex])" size="small"> 中断RGV</a-button>
                <a-button @click="resetRgvHandle(nodeData[nodeIndex])" size="small"> 恢复RGV</a-button>
                <a-button @click="resetRgvAndTask(nodeData[nodeIndex])" size="small"> 恢复RGV和任务</a-button>
              </div>
              <br/>
              <div style="display: flex; justify-content: space-around">
                <a-button @click="palletUp(nodeData[nodeIndex])" size="small"> 托盘顶升</a-button>
                <a-button @click="palletDown(nodeData[nodeIndex])" size="small"> 托盘下降</a-button>
              </div>
              <br/>
              <div style="display: flex; justify-content: space-around">
                <a-button @click="reversingMainChannel(nodeData[nodeIndex])" size="small"> 换向主通道</a-button>
                <a-button @click="reversingSubChannel(nodeData[nodeIndex])" size="small"> 换向副通道</a-button>
              </div>
            </a-from-item>
          </template>
          <template v-else>
            <a-form-item v-for="(key, index) in Object.keys(nodeData[nodeIndex])" :key="index" :label="key">
              {{ nodeData[nodeIndex][key] }}
            </a-form-item>
          </template>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getFloor, getMaxZ, getTaskType, getRgvs, generateTask, interruptRgv, resetRgv, resetRgvAndTask ,updateNodeStatus,palletUp,palletDown,reversingMainChannel,reversingSubChannel} from '@/api/api'
import dragZoomBox from './components/dragZoomBox'
export default {
  data() {
    return {
      path: '',
      socket: '',
      gridInfo: { x: '0', y: '0', z: '0' ,nodeStatus: 'N'},
      isNodeStatusChecked: false,


      gridTable: [],
      taskTypeList: [],
      taskLoading: false,
      rgvsList: [],
      form: { startNodeStr: "",endNodeStr: "",endSwitch: false, startSwitch: false },
      loading: false,
      maxFloor: 0,
      floor: 1,
      jumpFloor: undefined,
      rgvInfoFiled: {
        curLocation: '当前位置',
        palletStatus: '托盘状态',
        rgvStatus: '小车状态',
        errorMsg: '错误信息',
        groundCode: '地码',
        xvar: 'X偏移量',
        rgvId: '小车ID',
        yvar: 'Y偏移量',
        taskId: '任务Id',
      },
      deviceColumns: [
        {
          title: '编号',
          dataIndex: 'rgvId',
          align:'center',
          key: 'rgvId',
        },
        {
          title: '任务',
          dataIndex: 'taskId',
          align:'center',
          key: 'taskId',
        },
        {
          title: '位置',
          dataIndex: 'coord',
          align:'center',
          key: 'coord',
          scopedSlots: { customRender: 'coord' },
        },
        {
          title: '状态',
          dataIndex: 'taskStatus',
          scopedSlots: { customRender: 'taskStatus' },
          align:'center',
          key: 'taskStatus',
        },
        {
          title: '电量',
          dataIndex: 'electricity',
          align:'center',
          key: 'electricity',
        },
      ], //设备信息列
      deviceData: [], //设备信息数据
      elevatorColumns: [
        {
          title: '编号',
          dataIndex: 'hoistNo',
          align:'center',
          key: 'hoistNo',
        },
        {
          title: '任务',
          dataIndex: 'taskNo',
          align:'center',
          key: 'taskNo',
        },
        {
          title: '位置',
          dataIndex: 'deviceLocation',
          align:'center',
          key: 'deviceLocation',
        },
        {
          title: '状态',
          dataIndex: 'readyState',
          align:'center',
          scopedSlots: { customRender: 'readyState' },
          key: 'readyState',
        },
        {
          title: '层数',
          dataIndex: 'curFloor',
          align:'center',
          key: 'curFloor',
        },
      ], //提升机列
      gridClientWidth: 0,
      gridClientHeight: 0,
      elevatorData: [], //提升机数据
      floorSocket: null,
      nodeSocket: null,
      rgvInfos: [], //小车列表
      lockedCoordinate: [], //锁定列表
      stations: [], //输送线列表
      nodeData: {},
      nodeIndex: 'coordinationDetailedInfo',
      infoShow: true,
      clickCarFlag: '',
      wsFlag: false,
    }
  },
  components: { dragZoomBox },
  mounted() {
    // 初始化
    this.init()
    this.$nextTick(() => {
      this.gridClientWidth = this.$refs.dragZoomBox.$el.clientWidth
      this.gridClientHeight = this.$refs.dragZoomBox.$el.clientHeight
    })
  },
  computed: {
    mapData() {
      var arr = [
        ...this.rgvInfos.map((t) => {
          return { ...t, left: t.location.y * 30, top: t.location.x * 30, type: 0 }
        }),
        ...this.stations.map((t) => {
          return { ...t, left: t.deviceLocation.y * 30, top: t.deviceLocation.x * 30, type: 1 }
        }),
      ]
      return arr
    },
    scale() {
      // let size = 1
      var xSize = this.gridClientWidth / (this.gridTable[0].length * 30)
      // var ySize = this.gridClientHeight / (this.gridTable.length * 30)
      // size = Math.min(xSize, ySize)
      return xSize
    },
    userId() {
      return this.$store.getters.userInfo.id
    },
  },
  methods: {
    updateNodeStatus(nodeId,b){
      updateNodeStatus({"nodeId":nodeId,"nodeStatus":b?'Y':'N'})
        .then((res) => {
          if(res.success){
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }

        })
        .catch((res) => {

        })
    },
    stopRgvHandle(data) {
      interruptRgv(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }

        })
        .catch((res) => {

        })
    },
    resetRgvHandle(data) {
      resetRgv(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }
        })
        .catch(() => {

        })
    },
    resetRgvAndTask(data) {
      resetRgvAndTask(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }
        })
        .catch(() => {

        })
    },
    palletUp(data){
      palletUp(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }
        })
        .catch(() => {

        })
    },
    palletDown(data){
      palletDown(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }
        })
        .catch(() => {

        })
    },
    reversingMainChannel(data){
      reversingMainChannel(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }
        })
        .catch(() => {

        })
    },
    reversingSubChannel(data){
      reversingSubChannel(data.rgvId)
        .then((res) => {
          if(res.success){
            this.$message.success('操作成功')
          }else{
            this.$message.error(res.message)
          }
        })
        .catch(() => {

        })
    },
    rowClick(record, index) {
      var that = this
      return {
        on: {
          click: () => {
            that.setGrid(record.coord.x, record.coord.y)
          },
        },
      }
    },
    clickCar(data) {
      this.clickCarFlag = '车'
      this.setGrid(data.location.x, data.location.y)
    },
    getColor(enmu) {
      var color = '#78b6a7'
      //禁用
      if (enmu == 0) {
        color = '#b1b4b3'
      }
      //货位
      else if (enmu == 2) {
        color = '#74b8a7'
      }
      //工位 通道
      else if (enmu == 3 || enmu == 1) {
        color = '#f3ec7c'
      }
      //提升机
      else if (enmu == 4) {
        color = '#f3ec7c'
      }
      //充电桩
      else if (enmu == 5) {
        color = '#dd6f63'
      }
      //接驳点
      else if (enmu == 6) {
        color = '#fec55e'
      }
      return color
    },
    onChange(e, key) {
      this.form.endSwitch = false
      this.form.startSwitch = false

      this.form[key] = e
    },
    async init() {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      }
      var data = await getMaxZ()
      this.maxFloor = data.result
      this.getFloorData()
      this.initTaskType()
      this.initRgvs()
    },
    //生成任务
    async generateTaskHandle() {
      if (!this.form.taskType) return this.$message.error('请先选择任务类型')
      if (this.form.taskType == 6 || this.form.taskType == 2) {
        if (!this.form.startNodeStr) return this.$message.error('请先选择任务起点')
      }
      if (!this.form.endNodeStr) return this.$message.error('请先选择任务终点')
      if (!this.form.rgvId) return this.$message.error('请先选择车辆')
      var res = await generateTask({ ...this.form })
      if (res.code == 200) {
        this.$message.success('提交任务成功!')
      } else {
        this.$message.error(res.message)
      }
    },
    async initTaskType() {
      var res = await getTaskType()
      var arr = []
      res.result.forEach((t) => {
        Object.keys(t).forEach((key) => {
          arr.push({ label: t[key], value: key })
        })
      })

      this.taskTypeList = arr
    },
    async initRgvs() {
      var res = await getRgvs()
      var arr = []
      res.result.forEach((t) => {
        Object.keys(t).forEach((key) => {
          arr.push({ label: t[key], value: key })
        })
      })
      this.rgvsList = arr
    },
    initSocket() {
      //小车
      this.initRgvList()
      //提升机列表
      this.initLifterList()
      //当前层小车和工位
      this.initCurrentFloor()
      //当前节点信息
      this.initCurrentNode()
    },
    //ws 小车
    initRgvList() {
      var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/wcsWareHouseMonitor/"+this.userId+"/rgv_list";
      var socket = new WebSocket(url)
      socket.onopen = (res) => { }
      socket.onerror = (res) => { }
      socket.onmessage = (res) => {
        this.deviceData = JSON.parse(res.data).result
      }
    },
    //ws 提升机列表
    initLifterList() {
      var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/wcsWareHouseMonitor/"+this.userId+"/lifter_list";
      var socket = new WebSocket(url)
      socket.onopen = (res) => { }
      socket.onerror = (res) => { }
      socket.onmessage = (res) => {
        this.elevatorData = JSON.parse(res.data).result
      }
    },
    //ws 当前层小车和工位
    initCurrentFloor() {
      var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/wcsWareHouseMonitor/"+this.userId+"/current_floor";
      this.floorSocket = new WebSocket(url)
      this.floorSocket.onopen = (res) => {
        this.floorSocket.send(this.floor)
      }

      this.floorSocket.onerror = (res) => {}

      this.floorSocket.onmessage = (res) => {
        const { rgvInfos, stations, lockedCoordinate } = JSON.parse(res.data).result
        if (JSON.stringify(rgvInfos) != JSON.stringify(this.rgvInfos)) this.rgvInfos = rgvInfos
        if (JSON.stringify(stations) != JSON.stringify(this.stations)) this.stations = stations
        if (JSON.stringify(lockedCoordinate) != JSON.stringify(this.lockedCoordinate))
          this.lockedCoordinate = lockedCoordinate.map((t) => {
            return {
              ...t,
              top: t.x * 30,
              left: t.y * 30,
            }
          })
      }
    },
    //ws 当前节点信息
    initCurrentNode() {
      var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/wcsWareHouseMonitor/"+this.userId+"/current_node";
      this.nodeSocket = new WebSocket(url)
      this.nodeSocket.onopen = (res) => {
        this.nodeSocket.send(this.gridInfo.id)
      }
      this.nodeSocket.onerror = (res) => {}
      this.nodeSocket.onmessage = (res) => {
        if (this.clickCarFlag == '1') return
        if (this.clickCarFlag == '车') {
          this.clickCarFlag = '1'
        }
        this.gridInfo = { ...JSON.parse(res.data).result.coordinationDetailedInfo, ...this.gridInfo }
        this.isNodeStatusChecked = JSON.parse(res.data).result.coordinationDetailedInfo.nodeStatus === 'Y' ? true: false
       // this.gridTable[JSON.parse(res.data).result.coordinationDetailedInfo.x][JSON.parse(res.data).result.coordinationDetailedInfo.y] = JSON.parse(res.data).result.coordinationDetailedInfo.nodeStatus

        this.nodeData = JSON.parse(res.data).result
      }
    },
    prev() {
      this.floor = this.floor - 1
      this.getFloorData()
    },
    next() {
      this.floor = this.floor + 1
      this.getFloorData()
    },
    jump() {
      this.floor = this.jumpFloor
      this.getFloorData()
    },
    async getFloorData() {
      var res = await getFloor({ floor: this.floor })
      this.gridInfo = res.result[0][0]
      this.gridTable = this.buildGridData(res.result)
      if (this.floorSocket && this.nodeSocket) {
        this.floorSocket.send(this.floor)
        this.nodeSocket.send(this.gridInfo.id)
      } else {
        this.initSocket()
      }
    },
    buildGridData(data) {
      var arr = []
      var firstLength = data[0].length
      for (let index = 0; index <= firstLength; index++) {
        arr.push([])
      }
      data.forEach((t) => {
        t.unshift([])
      })
      data.unshift(arr)
      return data
    },
    setGrid(x, y) {
      this.nodeIndex = 'coordinationDetailedInfo'
      if (x == 0 && y == 0) return
      if (x > 0 && y == 0) return
      if (x == 0 && y > 0) return
      if (this.form.startSwitch) {
        this.form.startNodeStr = `(${x},${y},${this.floor})`
      }
      if (this.form.endSwitch) {
        this.form.endNodeStr = `(${x},${y},${this.floor})`
      }
      this.gridInfo = this.gridTable[x][y]
      this.nodeSocket.send(this.gridInfo.id)
    },
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close
  },
}
</script>


<style lang="less" scoped>
@keyframes twinkle {
  0% {
    border: 3px solid #1890ff;
  }

  100% {
    border: 3px solid #ffffff00;
  }
}

.container {
  position: relative;

  .focus_grid {
    animation: twinkle 0.5s infinite alternate;
  }

  /deep/.ant-form-item {
    margin-bottom: 5px;
  }

  .map_data {
    height: 30px;
    width: 30px;
    align-items: center;
    display: flex;
    padding: 2px;
    flex-direction: column;
    justify-content: space-between;
  }

  .warehouse_form {
    background: white;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .warehouse_info {
    border-radius: 4px;
    overflow: auto;
    padding-right: 10px;
    position: absolute;
    top: 80px;
    right: 0px;
    display: flex;
    transition: all 0.5s;

    .form {
      padding: 4px;
      background: white;
      width: 350px;
      word-break: break-all;
    }

    .tabs {
      font-size: 12px;

      div {
        padding: 4px 2px;
        box-sizing: border-box;
        background: #b4d7e6;
        writing-mode: vertical-rl;
        cursor: pointer;
      }

      div:hover {
        color: white;
      }
    }
  }

  .warehouse_content {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;

    .warehouse_table {
      background: white;
      margin-right: 10px;
      border-radius: 4px;
      padding: 2px;
      width: 360px;
    }

    .warehouse_grid {
      background: white;
      padding: 12px;
      border-radius: 4px;
      height: 100%;
      width: calc(100% - 360px);

      .warehouse_grid_contorl {
        display: flex;
        width: 400px;
        justify-content: space-between;
        margin-top: 10px;
      }

      .warehouse_grid_hearder {
        display: flex;
        justify-content: space-between;
        font-size: 12px;

        .grid_info_item {
          display: flex;

          div {
            align-items: center;
            color: deepskyblue;
          }
        }
      }

      .warehouse_grid_map {
        height: 100%;
        box-sizing: border-box;

        .warehouse_grid_map_line {
          display: -webkit-box;
          //justify-content: space-between;
          position: relative;
          flex: 1;

          &_item {
            width: 30px;
            height: 30px;
            text-align: center;
            font-size: 12px;
            line-height: 26px;
            padding: 2px;

            img {
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }
  }
}

.xy_content {
  position: relative;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid white;
  border-right: 13px solid transparent;
  border-left: 13px solid white;
}

@keyframes run {
  0% {
    background-image: url('./imgs/empty.png');
    background-size: 50px 100%;
  }
  33% {
    background-image: url('./imgs/runing_single.png');
    background-size: 50px 100%;
  }
  66% {
    background-image: url('./imgs/runing.png');
    background-size: 50px 100%;
  }
  100% {
    background-image: url('./imgs/run.png');
    background-size: 50px 100%;
  }
}

.runingLine {
  animation: run 0.5s infinite alternate;
}
</style>
